<template>

  <div class="ticket-view">
    <!-- 顶部导航栏 -->
    <van-nav-bar
        title="保洁报单"
        left-arrow
        @click-left="onBack"
        fixed
    />

    <div style="margin-top: 10px">
      <div>
        <div>
          <span style="margin-left: -30px">工单类别  </span>
          <select id="dispatch - person" style="width: 200px;height: 25px;margin-left: 30px" v-model="form.type">
            <option v-for="itme in options" :value="itme.value">{{ itme.text }}</option>
          </select>
        </div>
        <div style="margin-top: 10px">
          <span style="margin-left: -30px">优 先 级:</span>
          <select id="dispatch - person" style="width: 200px;height: 25px;margin-left: 35px" v-model="form.yid">
            <option v-for="itme in options1" :value="itme.value">{{ itme.text }}</option>
          </select>
        </div>
        <div style="margin-top: 10px">
          <div class="form-container">
            <div class="form-item">
              <label for="name">上报人</label>
              <input type="text" id="name" v-model="form.sbname">
            </div>
            <div class="form-item">
              <label for="phone">联系电话</label>
              <input type="text" id="phone" v-model="form.phone">
            </div>


            <div class="form-item">
              <label for="phone">选择开始时间</label>
              <van-button type="primary" size="small" @click="showPopup">选择时间</van-button>
            </div>

            <van-popup style="width: 80%;height: 350px;" v-model="show">
              <van-picker
                  title="开始时间"
                  show-toolbar
                  :columns="columns"
                  @confirm="onConfirm"
                  @cancel="onCancel"
                  @change="onChange"
              />
            </van-popup>

            <div class="form-item">
              <label for="phone">处理时限</label>
              <input type="text" id="phone" v-model="form.timelimit">
            </div>

            <div class="form-item">
              <label for="phone">选择结束时间时间</label>
              <van-button type="primary" size="small" @click="showjs">选择时间</van-button>
            </div>

            <van-popup style="width: 80%;height: 350px;" v-model="show1">
              <van-picker
                  title="结束时间"
                  show-toolbar
                  :columns="columns1"
                  @confirm="onConfirm1"
                  @cancel="onCancel1"
                  @change="onChange1"
              />
            </van-popup>

            <div class="form-item">
              <label for="phone">执行频率</label>
              <input type="text" id="phone" v-model="form.frequency">
            </div>


          </div>
        </div>
      </div>

      <div style="margin-top: 20px">
        <span style="margin-left: -260px">保洁内容</span>
        <div style="border: 1px solid #ccc;width: 90%;height: 190px;margin-left: 20px;margin-top: 10px">
          <span style="margin-top: 10px;margin-left: -270px">保洁项</span>
          <div style="margin-top: 10px;margin-left: 10px">
            <van-field
                v-model="student.cleaningtasks"
                rows="2"
                autosize
                type="textarea"
                maxlength="50"
                placeholder="内容描述"
                border:true
                show-word-limit
                :style="{ border: '1px solid #ccc',width: '95%',}"
            />
          </div>
          <span style="margin-left:-280px ">位置</span>
          <div>
            <select id="dispatch-person" style="width: 300px;height: 25px;" v-model="student.address">
              <option v-for="itme in options2" :value="itme.value">{{ itme.text }}</option>
            </select>
          </div>
        </div>
      </div>

      <div style="margin-top: 20px">
        <van-uploader v-model="fileList" :after-read="read" multiple :max-count="6"/>
      </div>

      <div>
        <van-button type="primary" @click="qr" style="background-color: #1989fa;width: 90%;border-radius: 25px"
                    size="large">提交任务
        </van-button>
      </div>

    </div>

  </div>

</template>

<script>

import {Toast} from 'vant';

export default {
  name: "Workorderbd",
  data() {
    return {
      form: {},
      student1: {},
      student: {},
      fileList: [],
      image: [],
      formData: {},
      show:false,
      show1:false,
      columns: ['8:00', '9:00', '10:00', '14:00', '15:00', '16:00', ],
      columns1: ['9:00', '10:00', '11:00', '15:00', '16:00', '17:00', ],

      options: [
        {text: '保洁任务', value: '1'},
        {text: '维修任务', value: '2'},
        {text: '清洁任务', value: '3'},
      ],
      options1: [
        {text: '普通', value: '1'},
        {text: '紧急', value: '2'},
        {text: '特级', value: '3'},
      ],
      options2: [
        {text: '东区1号楼', value: '东区1号楼'},
        {text: '2f', value: '2f'},
        {text: '3f', value: '3f'},
      ],
    }
  },
  created() {
    this.userhq();

  },
  methods: {

    userhq(){
      const item = localStorage.getItem('aa');

      const aaaa= JSON.parse(item)
      console.log(aaaa);
      let name= aaaa['username'];
      let phone= aaaa['phone'];

      // console.log("111111="+name)
      this.form.sbname=name;
      // console.log("222222"+item.username);
      this.form.phone=phone;
      // console.log("333333"+this.form.phone);
    },


    showjs(){
      this.show1=true;
    },

    onConfirm1(value, index) {
      Toast(`当前值：${value}`);
      this.form.dispatchtime=value;
      console.log(this.form.dispatchtime);
      this.show1 = false;
    },
    onChange1(picker, value, index) {
      Toast(`当前值：${value}`);
    },
    onCancel1() {
      Toast('取消');
    },

    showPopup(){
      this.show=true
    },

    onConfirm(value, index) {
      Toast(`当前值：${value}`);
      this.form.planbegintime=value;
      console.log(this.form.planbegintime);
      this.show = false;
    },
    onChange(picker, value, index) {
      Toast(`当前值：${value}`);
    },
    onCancel() {
      Toast('取消');
    },


    // read(file) {
    //   const files = Array.isArray(file) ? file : [file];
    //   files.forEach((item) => {
    //     const form = new Form();
    //     form.url('file', item.file);
    //
    //     this.axios.post('http://localhost:9999/api-cleaning-service/oss/upload', form, {
    //       headers: {
    //         'Content-Type': 'multipart/form-data'
    //       }
    //     }).then(res => {
    //       console.log(res.data.data);
    //       this.imageurl.push(res.data.data);
    //       console.log(this.imageurl)
    //     })
    //   });
    // },


    read(file) {

      const files = Array.isArray(file) ? file : [file];

      files.forEach((item) => {

        // 创建 FormData

        const formData = new FormData();

        formData.append('file', item.file);


        // 上传文件到服务器

        this.axios.post('http://localhost:9999/api-cleaning-service/oss/upload', formData, {
          headers: {
            // 设置请求头
            'Content-Type': 'multipart/form-data',
          },

        }).then(res => {
          // 初始化 shippingannex 为字符串
          if (!this.formData.shippingannex) {

            this.formData.shippingannex = '';

          }

          // 将文件 URL 添加到字符串中，用逗号分隔

          this.formData.shippingannex = this.formData.shippingannex

              ? this.formData.shippingannex + ',' + res.data

              : res.data;
          this.image = this.formData.shippingannex;
          console.log(this.image);
          console.log("2222" + this.image)

          Toast.success('文件上传成功');

        })
      });
    },


    onBack() {
      this.$router.push('/medical');
    },
    qr() {
      console.log(this.image.split(","))
      let url = this.image.split(",");
      this.form.url = url.join(",");
      this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/add`, this.form).then(res => {
        if (res.data.code == 1) {
          this.axios.post(`http://localhost:9999/api-cleaning-service/cleaningtasks/add`, this.student).then(res => {
            if (res.data.code == 1){
              this.student1.messageLevel=1;
              this.student1.messageContent="收到:"+this.form.sbname+"的消息";
              this.student1.messageType=1;
              this.student1.transferType="通知";
              this.student1.messageDetails="收到:"+this.form.sbname+"的消息";
              this.axios.post(`http://localhost:9999/myModule-service/messageCenter/addMessage`,this.student1).then(res => {
                if(res.data.code==1){
                  Toast.success("添加成功")
                  this.form = {};
                  this.student = {};
                  this.$router.push('/workorderbj')
                }
              })
            }
          })

        } else {
          Toast.fail("添加失败")
        }
      })
    },
  }
}
</script>


<style scoped>

.ticket-view {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-top: 46px;
  top: 30px;
}

.form-container {
  width: 300px;
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

label {
  width: 80px;
  text-align: right;
  margin-right: 10px;
}

input {
  flex: 1;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

</style>